<template>
	<view class="container">
		<view class="top u-flex u-row-between u-row-center">
			<view class="left u-m-l-32" style="color: #FFFFFF;">
				<view class="u-font-40 ">
					项目名称
				</view>
				<view class="u-font-28 u-p-t-20">
					武汉三六长江大桥工程
				</view>
			</view>
			<view class="right u-m-r-48">
				<image style="width: 88rpx; height: 91rpx;" src="../../../static/img/xm.png" mode=""></image>
			</view>
		</view>
		<view class="middle">
			<view class="u-flex u-row-between tdcy u-m-l-30 u-p-t-30">
				<view class="u-font-30" style="font-weight: bold;">
					团队成员
				</view>
				<view class="u-flex u-row-center u-m-r-30">
					<text class="u-font-28 u-m-r-18" style="color: #4B9CFF;">设置分配规则</text>
					<image @click="toSetAllocationRules" style="width: 18rpx; height: 30rpx;" src="../../../static/img/ykb.png"></image>
				</view>
			</view>
			<view class="fgx u-m-t-30">
			</view>
			<view class="f-list u-flex u-m-b-20 u-m-t-28" v-for="(item, index) in list" :key="index">
				<view class="qylg u-m-b-20" :style="{ backgroundImage: 'url(' + bjxm + ')' }">
					<text>{{item.logo}}</text>
				</view>
				<view class="f-item u-m-l-32 u-m-b-20">
					<view class="title u-flex u-m-t-12">
						<view class="">
							<text class="name">{{ item.name }}</text>
							<text v-if="item.leader" class="tz">团长</text>
						</view>
						<view class="fpbl">
							<text>分配比例</text>
							<text class="fpblsz">15</text>
							<text class="bfh">%</text>
						</view>
					</view>
					<view class="explain u-m-t-25">{{ item.explain }}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		
		data(){
			return{
				bjxm: "../../static/homepage/xmkk.png",
				list:[
					{
						name:'华晨宇',
						logo:'姓名',
						explain:'能者多得',
						leader: true
					},
					{
						name:'张三',
						logo:'姓名',
						explain:'能者多得'
					},
					{
						name:'张三',
						logo:'姓名',
						explain:'能者多得'
					},
					{
						name:'张三',
						logo:'姓名',
						explain:'能者多得'
					},
					{
						name:'张三',
						logo:'姓名',
						explain:'能者多得'
					},
					{
						name:'张三',
						logo:'姓名',
						explain:'能者多得'
					},
				]
			}
			
		},
		onLoad(options){
		},
		methods:{
			toSetAllocationRules(){
				uni.navigateTo({
					url:"../../notepad/zhihuiTeam/setAllocationRules"
				})
			}
		},
		
	}
</script>

<style scoped lang="scss">
	.top{
		width: 100%;
		height: 310rpx;
		background: linear-gradient(0deg, #AB61FF, #DF61FF);
	}
	.middle{
		width: 750rpx;
		height: 1050rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		margin-top: -60rpx;
	}
	.fgx{
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
	}
	.f-list{
		border-bottom: 2rpx solid #DADFED;
	}
	.qylg{
			width: 102rpx;
			height: 118rpx;
			background-size: 100% auto;
			background-position: 0 bottom;
			margin-left: 28rpx;
			margin-top: 15rpx;
			text{
				color: #888D99;
				font-size: 26rpx;
				line-height: 118rpx;
				margin-left: 27rpx;
			}
		}
		.name{
			font-size: 30rpx;
			color: #0D1D36;
			font-weight: bold;
		}
		.tz{
			width: 68rpx; color: #FFFFFF; font-size: 24rpx;
			height: 36rpx;
			background: #AB61FF;
			border-radius: 6rpx;
			margin-left: 20rpx;
		}
		.fpbl{
			position: absolute;
			left: 500rpx;
			text{
				font-size: 24rpx;
				color: #4B9CFF;
			}
			.fpblsz{
				width: 68rpx;
				height: 36rpx;
				border: 2rpx solid #4B9CFF;
				border-radius: 6rpx;
				margin-left: 10rpx;
			}
			.bfh{
				font-size: 24rpx;
				margin-left: 15rpx;
			}
		}
		
</style>
